<template>
  <popup ref="refPopup" height="80%" width="1100px">
    <div class="page">
      <div class="page-title" v-if="data.title">
        <span>
          <p>{{data.title}}</p>
          <i v-if="data.publishDate">{{data.publishDate}}</i>
        </span>
      </div>
      <div class="page-main">
        <div class="list scroll-wrap">
          <div class="item-wrap">
            <div class="item text" v-html="data.content"></div>
          </div>
        </div>
      </div>
    </div>
  </popup>
</template>
<script>
import { api } from '@/utils'
export default {
  layout: 'zhiyuan',
  data () {
    return {
      data: {},
      enrollGuideList: [],
      enrollGuideTotal: 0,
      size: 15,
      pages: 0,
      collegeId: '',
      year: '',
      id: '',
      currentIndex: 0
    }
  },
  methods: {
    init (data) {
      this.$refs.refPopup.init()
      // {id:item.id,collegeId:collegeId,year:yearRecruitment}
      this.id = data.id
      this.collegeId = data.collegeId
      this.year = data.year

      this.getEnrollGuideList()
      this.getEnrollGuideContent(this.id)
    },
    toEnrollDetail (index) {
      this.currentIndex = index
    },
    // 分页
    enrollGuidePagechange (currentPage) {
      this.pages = currentPage - 1
      this.getEnrollGuideList()
    },
    getEnrollGuideList () {
      this.$axios.get(api.zhiyuanQueryEnrollGuideList, { params: { collegeId: this.collegeId, year: this.year, size: this.size, page: this.pages } }).then(data => {
        this.enrollGuideList = data.content
        this.enrollGuideTotal = data.totalElements
        for (let i = 0; i < data.content.length; i++) {
          if (data.content[i].id === parseInt(this.id)) {
            this.currentIndex = i
            return this.currentIndex
          }
        }
      })
    },
    getEnrollGuideContent (id) {
      this.$axios.get(api.zhiyuanQueryEnrollGuideContent, {
        params: {
          id: id,
          collegeId: this.collegeId
        }
      }).then(data => {
        this.data = data
      })
    }
  },
  watch: {
    '$route' (to, from) {
      console.log(to)
      this.getEnrollGuideContent(to.query.id)
    }
  },
  mounted () {
    // this.getEnrollGuideList()
    // this.getEnrollGuideContent(this.id)
  }
}
</script>
<style lang="scss" scoped>
.page {
  width:100%; height:100%; overflow:hidden;
  border-radius: 20px;
  padding-top:25px;
  background:#FFF;
  display: flex;
  flex-direction: column;
  &-title{
    padding:0 70px;
    >span{
      padding:15px 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom:1px solid $line;
      >p{
        line-height:33px;
        font-size:24px;
        color:#000;
      }
      >i{
        color:#ADADAD;
      }
    }
  }
  &-main{
    padding:40px 70px;
    width:100%; height:100%;
    overflow-y:scroll;
  }
}
.list {
  flex: 1;
  .item-wrap {
    display: flex;
    justify-content: space-between;
    .item {
      flex: 1;
    }
    .enrollGuide {
      display: flex;
      flex-direction: column;
      width: 500px;
      li {
        padding: 25px 10px;
        a {
          text-decoration: underline;
          font-size: $size16;
        }
      }
      .active,
      a:hover {
        color: $positive;
      }
      /deep/ .pagination li {
        margin-right: 0;
        > a {
          padding: 0 7px;
        }
      }
    }
  }
}
</style>
